<template>
	<view :class="['xl-input-box', shape, {'input-shadow':shadow}]" :style="{ '--height': $xl.parseUnit(height, 'rpx'), '--padding': $xl.parseUnit(padding, 'rpx'), margin: $xl.parseUnit(margin, 'rpx'), background: disabled?'rgb(245, 247, 250)':'transparent' }">
		<view v-if="required" class="required">*</view>
		<xl-icon
			v-if="leftIcon && leftIcon!==''"
			:family="family"
			:name="leftIcon" 
			:size="leftIconSize"
			color="#888"/>
		<view v-if="leftLabel" class="left-label">
			{{leftLabel}}
		</view>
		<!-- 文本框 -->
		<input 
			class="main-input" 
			v-model="inputValue" 
			:type="_type" 
			:disabled="disabled"
			:maxlength="maxlength" 
			:placeholder="placeholder" 
			:password="type==='password'&&!showPassword"
			@blur="blur"
		/>
		<!-- 是否可见密码 -->
		<xl-icon 
			v-if="rightType==='password' && type==='password'"
			:name="showPassword?'xl-show':'xl-hide'" 
			size="20"
			color="#888"
			right="5"
			@tap="showPass"/>
			
		<!-- 倒计时 -->
		<view 
			v-if="rightType==='code'"
			:class="['vercode',{'vercode-run': second>0}]" 
			:style="{'background': second > 0 ? $xl.color.adjustColor(codeBackground, -20) : codeBackground}"
			@click="getCode"
		>{{ codeSecond }}</view>
		
		<!-- 图片验证码 -->
		<image 
			v-if="rightType==='img' && props.imgSrc"
			class="codeImg" 
			:src="props.imgSrc" 
			@click="changeImage"
		/>

		<!-- 右边图标 -->
		<xl-icon
			v-if="rightType==='icon' && rightIcon && rightIcon!==''"
			:name="rightIcon" 
			size="20"
			color="#888"
			@tap="clickRightIcon"/>
		
	</view>
</template>

<script setup>
	import { ref, reactive, computed, nextTick, onUnmounted } from 'vue'
	// 组件传参
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['update:modelValue', 'blur', 'getCode', 'changeImage', 'clickRightIcon'])
	
	// 输入框类型
	let _type = computed(()=>{
		return props.type == 'password' ? 'text' : props.type
	})
	
	// 双向绑定值，让v-model绑定的值双向变化
	const inputValue = computed({
		get:function(){
			return props.modelValue
		},
		set:function(value){
			emits('update:modelValue', value);
		}
	})
	
	// 输入框失去焦点时触发
	function blur(e){
		emits('blur', e)
	}
	
	// 是否显示明文
	let showPassword = ref(false) 
	function showPass(){
		//是否显示密码
		showPassword.value = !showPassword.value
	}
	
	// 是否开始倒计时
	let isRunCountDown = false
	// 点击获取手机验证码按钮
	function getCode(){
		//设置获取验证码的事件
		if(isRunCountDown){
			//判断是否开始倒计时，避免重复点击
			return false;
		}
		// 触发父组件请求验证码，父组件请求之后，调用countDown
		emits('getCode', countDown)
	}
	// 倒计时
	let second = ref(0);
	function countDown(){
		//开始倒计时
		if(isRunCountDown){
			//判断是否开始倒计时，避免重复点击
			return false;
		}
		isRunCountDown= true
		second.value = props.codeTime //倒数秒数
		calcSecond()
	}
	let timer;
	function calcSecond(){
		second.value--
		if(second.value==0) isRunCountDown= false
		else{
			timer = setTimeout(()=>{
				calcSecond()
			}, 1000)
		}
	}
	// 清除定时器
	onUnmounted(() => {
		if (timer) clearTimeout(timer);
	});
	// code显示文本
	let codeSecond = computed(() =>{
		//验证码倒计时计算
		if(second.value<=0){
			return props.codeText;
		}else{
			if(second<10){
				return '0'+second.value;
			}else{
				return second.value;
			}
		}
	})
	
	if(props.rightType === 'img') {
		changeImage()
	}
	// 点击重新请求图片验证码
	function changeImage(){
		emits('changeImage')
	}
	// 点击右边图标
	function clickRightIcon(){
		emits('clickRightIcon')
	}
</script>

<style lang="scss" scoped>
	.xl-input-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: var(--height);   /* Input 高度 */
		color: #333333;
		padding: var(--padding);
		position: relative;
		.required{
			position: absolute;
			top: 0;
			left: 0;
			padding: var(--padding);
			height: var(--height);
			line-height: var(--height);
			color: red;
		}
		.main-input{
			flex: 1;
			text-align: left;
			font-size: 28rpx;
			/* line-height: 100rpx; */
			padding-right: 10rpx;
			margin-left: 20rpx;
		}
	}
	
	.vercode {
		color: #FFFFFF;
		background: #4191ea;
		font-size: 12px;
		width: 160rpx;
		text-align: center;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 30rpx;
	}
	.vercode-run {
		font-size: 14px;
	}
	.round{
	    border: 1rpx solid #ebedf0;
	    border-radius: 50rpx ;
		&.input-shadow{
			border: none;
			-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
			box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1);
		}
	}
	.square{
	   border: 1rpx solid #ebedf0;
	   border-radius: 8rpx ;
	   &.input-shadow{
	   	border: none;
	   	-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
	   	box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1);
	   }
	}
	.line{
		position: relative;
		height: 28rpx;
	}
	.line::after {
	    position: absolute;
	    box-sizing: border-box;
	    content: ' ';
	    pointer-events: none;
	    right: 0;
	    bottom: 0;
	    left: 4%;
		width: 92%;
		height: 1px;
		background-color: #ebedf0;
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	}
	.line:last-child::after {
	    border: none;
	}
	
	.left-label{
		color: #666;
		font-size: 30rpx;
		width: 80rpx;
	}
	.codeImg{
		height: 56rpx;
		width: 140rpx;
		position: absolute;
		right: 28rpx;
		bottom: 16rpx;
		z-index: 99;
	}
</style>
